<!--跑马灯案例-->
<script setup lang="ts">
import {ref} from "vue";
let msg=ref<string>('吃好喝好，心态超好~')

// 法1：使用ref
let timer=ref<number>()
let isDisabled=ref<boolean>(false)

// 开始
function start (){
  // console.log(msg.value.substring(0,1))
  // console.log(msg.value.substring(1))
  isDisabled.value=!isDisabled.value
  timer.value=setInterval(()=>{
    msg.value=msg.value.substring(1)+msg.value.substring(0,1)
  },300)
}

// 暂停
let paused = function () {
  isDisabled.value=!isDisabled.value
  // 清除定时器
  clearInterval(timer.value)
}



/*// 法2：不使用ref
let timer:number;
// let isDisabled:boolean=false    //这种方法有问题
let isDisabled=ref<boolean>(false)

// 开始
function start (){
  // console.log(msg.value.substring(0,1))
  // console.log(msg.value.substring(1))

  // isDisabled=!isDisabled     //这种方法有问题
  isDisabled.value=!isDisabled.value
  timer=setInterval(()=>{
    msg.value=msg.value.substring(1)+msg.value.substring(0,1)
  },300)
}

// 暂停
let paused = function () {
  // isDisabled=!isDisabled    //这种方法有问题
  isDisabled.value=!isDisabled.value

  // 清除定时器
  clearInterval(timer)
}*/
</script>

<template>
<p>跑马灯</p>
  <button @click="start" :disabled="isDisabled">开始</button>
  <button @click="paused" :disabled="!isDisabled">暂停</button>
  <div>{{msg}}</div>
</template>

<style scoped>

</style>
